import { useNavigation } from '@react-navigation/native'
import {
    Bell,
    ChevronRight,
    FileText,
    MessageCircle,
    User,
  } from "lucide-react-native";
  import React from 'react';
import {
    ScrollView,
    TouchableOpacity,
  } from "react-native";
import {Text, View} from 'react-native-ui-lib';

import {SafeScreen } from '@/components/templates';

function Message() {
    // Tab data
  const tabs = [
    { id: "all", name: "全部" },
    { id: "read", name: "已读" },
    { id: "unread", name: "未读" },
  ];

  const [activeTab, setActiveTab] = React.useState("all");

  // Notification data
  const notifications = [
    {
      bgColor: "bg-pink-500",
      description: "高级小字描述高级小字描述",
      icon: <User color="#fff" size={24} />,
      id: 1,
      time: "14:58",
      title: "陌生人消息",
      unread: 1,
    },
    {
      bgColor: "bg-blue-500",
      description: "高级小字描述高级小字描述",
      icon: <Bell color="#fff" size={24} />,
      id: 2,
      time: "14:50",
      title: "警方消息",
      unread: 2,
    },
    {
      bgColor: "bg-green-500",
      description: "高级小字描述高级小字描述",
      icon: <FileText color="#fff" size={24} />,
      id: 3,
      time: "14:35",
      title: "平台通知",
      unread: 1,
    },
    {
      bgColor: "bg-blue-400",
      description: "高级小字描述高级小字描述",
      icon: <MessageCircle color="#fff" size={24} />,
      id: 4,
      time: "14:20",
      title: "客服消息",
      unread: 1,
    },
  ];
    const navigation = useNavigation()
    return (
        <SafeScreen className="flex-1 bg-white">
          {/* Header with blue background */}
          {/* <View className="h-12 bg-blue-500" /> */}
          <View className="h-32 bg-blue-500" />


            {/* Tab navigation */}
            <View className="flex-row justify-around border-b border-gray-200">
              {tabs.map((tab) => (
                <TouchableOpacity
                  className={`my-4 ${
                    tab.id == activeTab
                      ? "border-b-2 border-blue-500"
                      : "border-b-2 border-transparent"
                  }`}
                  key={tab.id}
                  onPress={() => { setActiveTab(tab.id); }}
                >
                  <Text
                    className={`text-xl font-bold ${
                      tab.active ? "text-blue-500 font-bold" : "text-gray-800"
                    }`}
                  >
                    {tab.name}
                  </Text>
                </TouchableOpacity>
              ))}
            </View>

            {/* Notification list */}
            <ScrollView className="flex-1 mt-6">
              {notifications.map((notification) => (
                <TouchableOpacity
                  className="flex-row items-center px-4 py-6"
                  key={notification.id}
                  onPress={() => navigation.navigate('MessageChat')}
                >
                  {/* Icon with colored background */}
                  <View
                    className={`w-10 h-10 rounded-full ${notification.bgColor} items-center justify-center mr-3`}
                  >
                    {notification.icon}
                  </View>

                  {/* Content */}
                  <View className="flex-1">
                    <View className="flex-row items-center justify-between">
                      <Text className="text-base font-medium text-gray-800">
                        {notification.title}
                      </Text>
                      <Text className="text-sm text-gray-500">
                        {notification.time}
                      </Text>
                    </View>
                    <Text className="text-sm text-gray-500 mt-1">
                      {notification.description}
                    </Text>
                  </View>

                  {/* Unread count and arrow */}
                  <View className="flex-row items-center">
                    {notification.unread > 0 && (
                      <View className="w-5 h-5 bg-red-500 rounded-full items-center justify-center mr-2">
                        <Text className="text-xs text-white font-bold">
                          {notification.unread}
                        </Text>
                      </View>
                    )}
                    <ChevronRight color="#999" size={18} />
                  </View>
                </TouchableOpacity>
              ))}
            </ScrollView>

        </SafeScreen>
      );

}
export default Message;